<template>
	<view class="page">
		<!-- 标题栏  start-->
		<fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
			<block slot="content">{{ i18n['收益明细'] }}</block>
			<block slot="right">
				<image :src="imgBaseUrl+'distribution/calendar.png'" class="fu-block-36" @click="showCalendar" />
			</block>
		</fu-custom>
		<!-- 标题栏  end -->
		<scroll-view scroll-x class="bg-white nav margin-bottom-20">
			<view class="flex justify-around text-center padding-lr">
				<view v-for="(item, index) in navList" :key="index"
					class="text-df text-666 relative padding-tb-24 text-bold"
					:class="{ cur: tabCurrentIndex === index }" @click="tabClick(index)">
					{{ item.text || '' }}
					<view class="active-line"></view>
				</view>
			</view>
		</scroll-view>

		<!-- 导航栏 end -->
		<view class="margin-top-xl" v-if="isShowLoading">
			<fu-loading></fu-loading>
		</view>
		<!-- 订单列表 start -->
		<view class="margin-lr margin-top-110 " v-else>
			<view class="flex align-center" v-if="start_data!=''&&end_data!=''">
				<image :src="imgBaseUrl+'distribution/calendar.png'" mode="aspectFill" class="fu-block-28"></image>
				<text class="padding-left-xs">{{start_data}}--{{end_data}}</text>
				<text class="cuIcon-roundclose text-df text-999 margin-left-16" @click="cancel"></text>
			</view>
			<!--  -->
			<block v-for="(item, index) in listData" :key="index">
				<view class="padding margin-top radius-8 bg-white ">
					<view class="w100">
						<view class="text-theme text-bold text-sm ">
							{{ item.create_time }}
						</view>
						<view class="text-df w100 justify-between flex align-center  padding-top-sm">
							<text class="text-bold text-333"> {{ i18n['收益金额'] }}：￥{{ item.change_money }}</text>

							<text class="text-theme">
								{{item.is_delete == 0? i18n['待结算'] : i18n['已结算'] }}
							</text>
						</view>
						<view class="text-sm text-999 padding-top-sm">{{ i18n['订单编号'] }}：{{ item.order_no }}</view>
						<view class="text-sm text-999 padding-top-sm padding-bottom">{{ i18n['订单金额'] }}：{{ item.goods_money }}</view>
						<view class="text-sm text-theme padding-top solids-top">{{ item.remark }}</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 订单列表 end -->
		<!-- 日历弹框 start -->
		<fu-popup v-model="isShow" mode="center" :mask-close-able="true" @close="closePopup">
			<view class="padding-lr-24 bg-white radius-16 width-640 ">
				<fu-calendar @change="change" :active-bg-color="activeBg" :range-bg-color="rangeBg" :future="false"
					start-text="" end-text="" mode="range" :isDefaultDay="false" :start-time="start_data"
					:end-time="end_data"></fu-calendar>
			</view>
		</fu-popup>
		<!-- 日历弹框 end -->
		<fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
			:listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
		<!-- 空状态 end -->
		<!-- 网络监测 start -->
		<fu-notwork></fu-notwork>
		<!-- 网络监测 end -->
	</view>
</template>

<script>
	// 定义顶部导航
	import calendar from '@/common/mixin/calendar.js';
	// 引入混入数据加载 js
	import pagingList from '@/common/mixin/paging_list.js';
	export default {
		mixins: [pagingList,calendar ],
		data() {
			return {
				isShowLoading: false, //是否显示页面初始化加载loading
				tabCurrentIndex: 0, //顶部导航 选择的第几个
				navList: [{
						state: 0,
						text: global.i18n['全部'],
						type: 0
					},
					{
						state: 2,
						text: global.i18n['待结算'],
						type: 3
					},
					{
						state: 3,
						text: global.i18n['已结算'],
						type: 4
					}
				], //冻结顶部导航
				lists: [], //订单列表
				rangeBg:'rgba(0,142,77,0.3)',
				activeBg:this.$store.state.themeColor,
				page: 1, //页码说
				minixPagingListsApi: global.apiUrls.getFreezeDetail, //混入获取列表接口名
				allowOnloadGetList: false, //是否允许onlaod加载数据
				pageingListApiMethod: 'post', //接口类型属于get
				isInit: false, //是否已经初始化
				type: 0, //请求的订单类别
				isShow: false, //日历弹框
				start_data: '', //开始日期
				end_data: '', //结束日期
				activeIndex: '', //我的资产进入  0 自购返 1分享获利
				active: '0', //推广人数收益明细分类  1今日收益  2 本月收益 3 累计首页
			};
		},
		onLoad(e) {
			this.activeIndex = e.activeIndex
			this.active = e.active
			this.allowOnloadGetList = true
			this.pagingListToggle()
		},
		/**
		 * @description 获取订单列表
		 */
		onShow() {

		},
		methods: {

			/* @description 混入传参钩子函数
			 * @param type 获取数据类型 type 1为收藏列表 3为浏览历史
			 */
			pagingListPostData() {
				let is_delete = 'all'
				if (this.tabCurrentIndex == 1) {
					is_delete = 0
				} else if (this.tabCurrentIndex == 2) {
					is_delete = 1
				} else {
					is_delete = 'all'
				}
				let type = ''
				if (this.active > 0) {
					// 3：推广分润
					type = 3
				} else {
					//   分享赚  自购返
					if (this.activeIndex == 1) {
						type = 2
					} else if (this.tabCurrentIndex == 0) {
						type = 1
					}
				}
				return {
					start_time: this.start_data,
					end_time: this.end_data,
					type: type, //1：自购返，2：分享赚，3：推广分润，all：全部
					is_delete: is_delete, //0：待结算，1：已结算，all：全部
					page: this.page,
				};
			},
      cancel(){
        this.start_data = ''
        this.end_data = '' 
        this.pagingListToggle()
      },
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.type = this.navList[index].type;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.pagingListToggle()
			},

			/**
			 * @description  显示日历
			 */
			showCalendar() {
				this.isShow = true;
			},
			/**
			 * @description  隐藏日历
			 */
			closePopup() {
				this.isShow = false;
			},

			/**
			 * @description  获取列表
			 * @param {Object} value  用来判断第页码初始化第一次 加载页面loading
			 */
			change(value) {
				if (value.isInit) return;
				this.start_data = value.start;
				this.end_data = value.end;
				setTimeout(() => {
					this.isShow = false;
				}, 800)
				this.pagingListToggle()
			},

		}
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
	}

	.solid-bottom::after {
		z-index: 9999;
	}

	// 标题栏 start
	.nav {
		position: fixed;
		z-index: 999;
	}


	.active-line {
		position: absolute;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		display: none;
		width: 40rpx;
		height: 4rpx;
		background: $theme;
		opacity: 1;
		border-radius: 10rpx;
	}


	.cur {
		color: #333;

		.active-line {
			display: block;
			background: $theme !important;
		}
	}
	.cur::after {
		content: '';
		display: none;
	}
</style>
